<!-- 我的收藏 页面 -->
<template>
  <div class="plan-to-buy">
    <div class="have-bought">
      <h1 style="font-weight: 600; font-size: 20px">收藏素材</h1>
      <div class="package-name" v-for="item in table" :key="item.name">
        <div class="package-name-left">
          <img :src="item.img" alt="" />
          <div class="material">
            <div>
              素材名称：<span>{{ item.name }}</span>
            </div>
            <div>
              素材内容：<span>{{ item.content }}</span>
            </div>
          </div>
        </div>
        <div class="package-name-right">
          <n-button type="info" class="add" @click="handleLook(item)"
            >查看</n-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { NButton } from "naive-ui";

useHead({ title: "我的收藏" });

const table = reactive([
  {
    img: "../../../assets/imgs/wukong.jpg",
    name: "七龙珠",
    content: "猪脚-孙悟空",
  },
  {
    img: "../../../assets/imgs/miren.jpg",
    name: "火影忍者",
    content: "猪脚-漩涡鸣人",
  },
]);

function handleLook(item) {
  console.log("item", item);
}
</script>
<style lang="scss" scoped>
.plan-to-buy {
  padding: 20px;
  .package-name {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ccc;
    height: 130px;
    margin: 20px 0;
    padding: 20px;
    img {
      width: 50px;
    }
    .package-name-left {
      display: flex;
      align-items: center;
      .material {
        margin-left: 20px;
        font-size: 20px;
      }
    }
    .package-name-right {
      :deep(.n-button) {
        width: 100px;
      }
    }
  }
}
</style>
